<div class="image_block">
    <button type="button" class="upload-image layui-btn layui-btn-primary">
        <i class="layui-icon">&#xe67c;</i>上传图片
    </button>
    <input type="hidden" name="{$name}" value="{$value}">
    <div class="site-demo-upload">
        {if condition="!empty($value)"}
        <div class="layui-layer-phimg" style="display: inline-block;">
        <img style="width: 150px;height: 150px;margin-top: 5px" src="{$value|thumb}">
            <div class="img-del-btn" style="display: none">
                <div class="btn imgbar" style=""></div>
                <a class="btn" href="javascript:" data-role="del_single_img"
                   style="color: #fff;">删除</a>
            </div>
        </div>
        {/if}
    </div>
</div>


<script>
    var is_loaded_upload = is_loaded_upload ? is_loaded_upload : 0;  //如果已加载就不再加载
    if (is_loaded_upload == 0) {
        layui.use(['upload', 'laytpl'], function () {

            var upload = layui.upload;
            var laytpl = layui.laytpl;
            var $ = layui.jquery;


            var bind_del_single_img_btn = function () {
                $('[data-role="del_single_img"]').unbind('click')
                $('[data-role="del_single_img"]').click(function () {
                    var $input = $(this).closest('.image_block').find('input[type="hidden"]');
                    var $obj = $(this).closest('.layui-layer-phimg');
                    $obj.fadeOut();
                    $input.val('');
                })
            };
            bind_del_single_img_btn();
            upload.render({
                url: "{:url('core/file/uploadimage')}"
                , elem: '.upload-image' //指定原始元素，默认直接查找class="layui-upload-file"
                , method: 'post' //上传接口的http类型
                , field: 'image'
                , done: function (res, index, upload) { //上传后的回调
                    var $obj = $(this.item).closest('.image_block');
                    var string = laytpl('<div class="layui-layer-phimg" style="display: inline-block">     ' +
                        '  <img style="width: 150px;height: 150px;margin-top: 5px"    src="{{ d.path }}">     ' +
                        '    <div class="img-del-btn" style="display: none">         ' +
                        '   <div class="btn imgbar" style=""></div>         ' +
                        '   <a class="btn" href="javascript:"  data-role="del_single_img" style="color: #fff;">删除</a>         ' +
                        '   </div>         ' +
                        '   </div> ').render({'path': res.data.thumb});
                    $obj.find('.site-demo-upload').html(string);
                    bind_del_single_img_btn();
                    bind_img_del_btn_mouse();
                    var $input = $obj.find('input[type="hidden"]');
                    $input.val(res.data.id);
                 }
            });

        })
        is_loaded_upload = 1;
    }
</script>